import './index.less';

export default {
  name: 'oooi',
  functional: true,
  render(h, ctx) {
    const step = ctx.props.step;
    const time = ctx.props.time;
    const setpW = ['85', '180', '290', '400', '555'];
    const textT = ['out', 'off', 'Curise', 'on', 'in'];
    return [
      <div class='oooi-fly-box'>
        <a-icon class={['fly-ing', `fly-${step}`]} component={require('@/assets/icon/flying.svg')}/>
        <svg class='oooi-svg' width='58px' height='25px' viewBox='120 220 520 100' version='1.1'>
          <path
            stroke-linecap='round'
            fill='transparent'
            stroke='#d8dfe8'
            stroke-width='20'
            d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
            class='path'
          ></path>
          <path
            stroke-linecap='round'
            fill='transparent'
            stroke='#336bf6'
            stroke-width='20'
            style={{ 'stroke-dasharray': `${setpW[step - 1]}, 555` }}
            d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
            class='line2'
          ></path>
          <path
            stroke-linecap='butt'
            fill='transparent'
            stroke='#fff'
            stroke-width='21'
            d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
            class='line1'
          ></path>
        </svg>
      </div>,
      time ? <span class='fs-12 color-s  HelNe oooi-text'>{textT[step - 1]} {step !== 3 ? time : ''}</span> : undefined
    ];
  }
};
